<template>
  <div class="part-score-tab">
    <el-table
      v-loading="loading"
      :data="scores"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="课程名称" min-width="150" resizable>
        <template #default="scope">
          {{ scope.row.courseName || '未知课程' }}
        </template>
      </el-table-column>
      <el-table-column label="成绩组成" min-width="120" resizable>
        <template #default="scope">
          {{ scope.row.scoreComponentName || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="比例" width="80" resizable>
        <template #default="scope">
          {{ scope.row.proportion ? scope.row.proportion + '%' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="学号" min-width="120" resizable>
        <template #default="scope">
          {{ scope.row.studentNumber || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" min-width="100" resizable>
        <template #default="scope">
          {{ scope.row.studentName || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="成绩" width="80" resizable>
        <template #default="scope">
          <span :class="getScoreClass(scope.row.score)">
            {{ scope.row.score !== null && scope.row.score !== undefined ? scope.row.score : '未填' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="最终成绩" width="100" resizable>
        <template #default="scope">
          <span :class="getScoreClass(getFinalScore(scope.row.studentNumber))">
            {{ getFinalScore(scope.row.studentNumber) ?? '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="计分方式" width="120" resizable>
        <template #default="scope">
          {{ scope.row.scoreTypeName || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="队次" min-width="120" resizable>
        <template #default="scope">
          {{ scope.row.className || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="是否补考" width="100" resizable>
        <template #default="scope">
          <el-tag :type="scope.row.isMakeup ? 'warning' : 'info'">
            {{ scope.row.isMakeup ? '补考' : '正考' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120" resizable>
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue'
import { computed } from 'vue'

const props = defineProps({
  scores: {
    type: Array,
    default: () => []
  },
  finalScores: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  teachingMissionName: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['edit'])

// 创建最终成绩映射
const finalScoreMap = computed(() => {
  const map = new Map()
  props.finalScores.forEach(score => {
    if (score.studentNumber) {
      map.set(score.studentNumber, score.finalScore)
    }
  })
  return map
})

// 获取学生的最终成绩
const getFinalScore = (studentNumber) => {
  return finalScoreMap.value.get(studentNumber) ?? null
}

const handleEdit = (row) => {
  emit('edit', row)
}

const getScoreClass = (score) => {
  if (score === null || score === undefined) return ''
  if (score >= 90) return 'score-excellent'
  if (score >= 80) return 'score-good'
  if (score >= 60) return 'score-pass'
  return 'score-fail'
}
</script>

<style scoped>
.part-score-tab {
  width: 100%;
}

.score-excellent {
  color: #67c23a;
  font-weight: bold;
}

.score-good {
  color: #409eff;
  font-weight: bold;
}

.score-pass {
  color: #e6a23c;
}

.score-fail {
  color: #f56c6c;
  font-weight: bold;
}
</style>
